<template>
  <!-- cart 购物车 -->
  <view class="container cart_list_container" style="padding-top:0px">
    <!-- 购物车列表 -->
    <view class="cart_list">
      <view class="cart_item flex" v-for="(item,index) in carList" :key="item.goodsId">
        <!-- 左侧选项卡 -->
        <view class="check">
          <checkbox checked-color="#FA4126" :checked="item.isChecked" :value="`${item.goodsId}_${index}`" :key="index"
                    @click="checkboxChange(item.isChecked,item.goodsId)"></checkbox>
        </view>
        <!-- 中间商品图 -->
        <view class="shop_img">
          <image style="width: 114px;height:124px " class="img" :src="item.imageUrl"></image>
        </view>

        <!-- 右侧商品信息 -->
        <view class="shop_info flex">
          <view class="title">{{ item.name }}</view>
          <view class="buy flex">
            <view class="price">￥{{ item.price }}</view>
            <view class="buy_btn flex">
              <icon style="" size="18px" type="clear" color="#71797f" name="delete" class="del"
                    @click="delOneApi(item.goodsId)"/>
              <button style="text-align: center" size="mini" @click="setNumApiCb('dow',item.goodsId)">
                -
              </button>
              <input :value="item.count" style="text-align: center"/>

              <button size="mini" style="text-align: center" @click="setNumApiCb('up',item.goodsId)">
                +
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空的购物车 -->
    <!-- <van-empty description="还没有添加商品，快去添加吧～" /> -->
    <!-- 底部结算 -->
    <view class="submit_footer flex">
      <view class="check">
        <checkbox-group @change="checkboxChangeAll">
          <checkbox checked-color="#FA4126" :checked="(carList.length)===Selected">
            全选
          </checkbox>
        </checkbox-group>
      </view>

      <view class="right flex">
        <view class="total-wrapper">
          <text>合计：</text>
          <text class="total-price">¥ {{ Price }}</text>
        </view>
        <view class="total-count">
          <button size="mini" :plain="false" primary="warn"
                  color="linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36))" round>
            去结算({{ needGoods }})
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
export default {
  name: "carList"
}
</script>
<script lang="ts" setup>
import {onLoad, onShow} from "@dcloudio/uni-app"
import {clear, delOne, getCarList, isChecked, isCheckedOne, setNum} from "@/Api/carList";
import {ref, computed} from "vue";

const idList = ref([]);
const carList = ref([]);
//发起请求获取购物车数据
const getCarListApi = async () => {
  try {
    const {code, data} = await getCarList();
    if (code === 200) {
      console.log(data)
      carList.value = data
    }
  } catch (e) {

  }
}
const isCheckedApi = async (num) => {
  const {code} = await isChecked(num);
  if (code === 200) {
    getCarListApi()
    uni.showToast({
      title: '修改成功',
      icon: 'success'
    })
  }
}
const isCheckedOneApi = async (id, num) => {
  const {code} = await isCheckedOne(num, id)
  if (code === 200) {
    getCarListApi()
    uni.showToast({
      title: '修改成功',
      icon: 'success'
    })
  }
}
const setNumApi = async (id, num) => {
  const {code} = await setNum(num, id)
  if (code === 200) {
    getCarListApi()
    uni.showToast({
      title: '操作成功',
      icon: 'success'
    })
  }
}
const delOneApi = async (id) => {
  const {code} = await delOne(id);
  console.log(code)
  if (code === 200) {
    getCarListApi()
    uni.showToast({
      title: "操作完成",
      icon: 'success'
    })
  }
}
const clearApi = async () => {
  const {code} = await clear()
  if (code === 200) {
    uni.showToast({
      title:'操作完毕',
      icon:'success'
    })
    getCarListApi()
  }
}

//计算属性位置
const Selected = computed(() => {
  return carList.value.filter(item => item.isChecked).length
})
const Price = computed(() => {
  return carList.value.filter(item => item.isChecked).reduce((pre, item) => pre + (item.count * item.price), 0)
})
const needGoods = computed(() => {
  return carList.value.filter(item => item.isChecked).reduce((pre, item) => pre + item.count, 0)
})


//点击回调位置
function checkboxChange(isChecked, id) {
  const num = +isChecked ? 0 : 1;
  isCheckedOneApi(id, num)
}
function checkboxChangeAll(e) {
  isCheckedApi((+e.detail.value.length))
}
function setNumApiCb(flage, id) {
  if (flage === 'up') {
    setNumApi(id, 1)
  } else if (flage === 'dow') {
    setNumApi(id, -1)
  }
}


onShow(() => {
  getCarListApi()
})
</script>

<style scoped>
/* pages/cart/cart.wxss */
.cart_list_container {
  height: 100%;
  padding: 0 rpx;
}

.cart_list {
  padding-bottom: 150 rpx;
}

.cart_item {
  padding: 20 rpx;
  border-bottom: 1 rpx solid #eee;
  background: #fff;
  align-items: center;
}

.cart_item .check {
  width: 112 rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart_item .shop_img {
  width: 228 rpx;
  height: 250 rpx;
}

.cart_item .shop_img .img {
  height: 100%;
  width: 100%;
}

.shop_info {
  height: 250 rpx;
  flex-direction: column;
  margin-left: 20 rpx;
  justify-content: space-between;
  flex: 1;
}

.buy {
  align-items: center;
  justify-content: space-between;
}

.buy .price {
  color: #fa4126;
}


/* 底部结算 */
.submit_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  height: 100 rpx;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  padding: 0 20 rpx;
  display: flex;
  z-index: 3;
}

.submit_footer .right {
  margin: 0 20 rpx;
}

.total-price {
  color: #ee0a24;
  font-weight: 500;
  font-size: 20px;
  margin: 0 4px;
}

.total-count {
  margin: 0 10 rpx;
}
</style>